<template>
    <div class="Detail-Container">
        <div class="Detail-Header">
            <div class="header-left">
                <div class="team-first-letter">
                    {{ curTeamName.charAt(0) }}
                </div>
                <h1 class="team-name">{{ curTeamName }}</h1>
            </div>
            <div class="Header-Right">
                <button v-show="isAdmin" class="Detail-Btn primary-btn" @click="ToManage">管理团队</button>
                <button class="Detail-Btn default-btn" @click="quitTeam">退出团队</button>
                <button class="Detail-Btn default-btn" @click="BackHome">返回</button>
            </div>
        </div>

        <div class="team-info-big-box">
            <div class="team-avatar-big">
                <img :src="curTeamAvatar" alt="团队头像">
            </div>
            <div class="team-info-content">
                <h1 class="title-value">{{ curTeamName }}</h1>
                <div class="team-core-info">
                    <div class="info-item">
                        <span class="info-label">团队负责人</span>
                        <span class="info-value">{{ curTeamLeader }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">团队人数</span>
                        <span class="info-value">{{ curTeamMember }} 人</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">项目数量</span>
                        <span class="info-value">{{ teamPrj?.length || 0 }} 个</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">团队ID</span>
                        <span class="info-value">{{ curteamID }}</span>
                    </div>
                </div>

                <div class="team-description">
                    <span class="info-label-desc">团队描述</span>
                    <p class="desc-content">{{ Description }}</p>
                </div>

                <div class="team-invite-code">
                    <div class="invite-code-card">
                      <div class="invite-left">
                        <span class="invite-label">团队邀请码</span>
                        <span class="invite-desc">通过邀请码可以邀请新成员加入团队</span>
                      </div>
                      <div class="invite-right">
                        <span class="code-text">{{ teamInviteCode }}</span>
                        <button class="copy-btn" @click="copyInviteCode">复制</button>
                      </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="Content">
            <div class="prj-Detail">
                <div class="section-header">
                    <div class="section-header-item">
                      <h2>团队项目</h2>
                      <button class="add-project-btn" @click="">+ 添加新项目</button>
                    </div>
                    <div class="section-divider"></div>
                </div>
                <div 
                    v-for="project in teamPrj" 
                    :key="project.id" 
                    class="team-project" 
                    @click=""
                >
                    <div class="project-content">
                        <span class="project-title">{{ project.title }}</span>
                        <div class="project-other">
                            <p class="project-desc">描述: {{ project.description }}</p>
                            <div class="project-meta">
                                <span class="meta-item">收藏: {{ project.favorites }}</span>
                                <span class="meta-item" :class="project.isPublic ? 'public-tag' : 'private-tag'">
                                    {{ project.isPublic ? '公开项目' : '私有项目' }}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-if="teamPrj?.length === 0" class="no-project">
                    暂无团队项目，快去创建第一个项目吧！
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useTeamStore } from '../stores/teamStore.ts';
import { useUserStore } from "@/stores/userStore.ts";
import { useServer } from '../components/ts/useServer.ts'
import default_teamimage from "@/assets/images/default_teamimage.png"
import router from "@/router/index.ts";

const userStore = useUserStore();
const teamStore = useTeamStore();
const { get, post } = useServer();
const testUrl = 'https://m1.apifoxmock.com/m1/6951272-6668040-default/api'

// 团队详情相关
const isAdmin = ref(false);
const curTeamName = ref('');
const curTeamLeader = ref('');
const curteamID = ref('');
const curTeamMember = ref(1);
const Description = ref('');
const curTeamAvatar = ref(default_teamimage);
const teamPrj = ref<Project[]>([]);
const teamInviteCode = ref('');

// 项目类型定义
interface Project {
  id: number;
  title: string;
  description: string;
  favorites: number;
  isPublic: boolean;
}

onMounted(async () => {
  const currentTeam = teamStore.currentTeam;
  const currentUser = userStore.currentUserName;

  // 载入当前团队的内容
  if(currentTeam) {
    curTeamName.value = currentTeam.name;
    curteamID.value = currentTeam.id;
    curTeamLeader.value = currentTeam.admin;
    curTeamAvatar.value = currentTeam.thumbnail;
    Description.value = currentTeam.description;
    curTeamMember.value = currentTeam.member_count;
    teamInviteCode.value = currentTeam.access;

    if(currentUser === curTeamLeader.value) isAdmin.value = true;
  }

  await loadTeamsProjects();
})

// 页面跳转
const ToManage = () => {
    router.push('/team/manage');
}
const BackHome = () => {
    router.push('/team');
    teamStore.resetCurrentTeam();
}

// 复制邀请码
const copyInviteCode = () => {
  if (!teamInviteCode.value) return;
  navigator.clipboard.writeText(teamInviteCode.value)
    .then(() => {
      alert('邀请码复制成功！');
    })
    .catch(() => {
      alert('邀请码复制失败，请手动复制');
    });
}

const loadTeamsProjects = async () => {
  const currentTeam = teamStore.currentTeam;
  if (!currentTeam || !currentTeam.id) {
    alert('团队ID缺失，无法加载项目');
    return;
  }

  try {
    const res = await get('team/getProjects', { teamID: currentTeam.id }, testUrl);
    
    if (res.success) {
      const projects = Array.isArray(res.team_projects) ? res.team_projects : [];
      const formattedProjects = projects.map((project: Project) => ({
        id: project.id,
        title: project.title || '未命名项目',
        description: project.description || '无项目描述',
        favorites: project.favorites || 0,
        isPublic: project.isPublic || false,
      }));
      if(teamStore.currentTeam) {
        teamStore.currentTeam.projects = formattedProjects;
      }
      teamPrj.value = formattedProjects;
    } else {
      alert('加载项目失败: ' + (res.message || '未知错误'));
    }
  } catch (error) {
    console.error('加载项目列表失败', error);
    alert('网络错误，无法加载项目，请检查网络连接');
    teamStore.error = '网络错误，请稍后重试';
  }
}

// 退出团队
const quitTeam = async () => {
  const isConfirmed = confirm(`确定要退出团队 "${curTeamName.value}" 吗? `);
  if(isConfirmed && curteamID.value) {
    try{
      const res = await post('team/quit', {
        teamID: curteamID.value, 
        userID: userStore.currentUser
      }, testUrl);
      if(res.success) {
        teamStore.teams = teamStore.teams.filter(team => team.id !== curteamID.value);
        router.push('/team');
        alert('退出团队成功！');
      } else {
        alert('退出团队失败: ' + (res.message || '未知错误'));
      }
    } catch(error) {
      console.error('退出团队失败', error);
      teamStore.error = '退出团队失败，请稍后再试';
    }
  }
  return;
}
</script>

<style scoped>
/* 全局容器 */
.Detail-Container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #F8FAFC;
  padding: 0;
  margin: 0;
  overflow-y: auto;
  box-sizing: border-box;
}

/* 头部 */
.Detail-Header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background-color: #FFFFFF;
  height: 120px; /* 降低高度，更简洁 */
  padding: 10px 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
  border-radius: 6px;
}

/* 头部左侧 */
.header-left {
  display: flex;
  align-items: center;
  gap: 15px;
}

/* 团队首字Icon */
.team-first-letter {
  width: 46px;
  height: 46px;
  border-radius: 6px;
  background-color: #e1f5fe;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #007bff;
  font-size: 20px;
}

/* 团队名 */
.team-name {
  font-size: 25px;
  color: #2C3E50;
  margin: 0;
  font-weight: 600;
}

/* 头部右侧按钮 */
.Header-Right {
  display: flex;
  gap: 0.75rem;
}

/* 按钮样式 */
.Detail-Btn {
  padding: 0.5rem 1.25rem;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}
.primary-btn {
  background-color: #3498DB;
  color: #FFFFFF;
}
.primary-btn:hover {
  background-color: #2980B9;
  box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
}
.default-btn {
  background-color: #FFFFFF;
  color: #2C3E50;
  border: 1px solid #E2E8F0;
}
.default-btn:hover {
  background-color: #F1F5F9;
  color: #3498DB;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* 团队核心信息区域 */
.team-info-big-box {
  width: 100%;
  background-color: #FFFFFF;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 2rem 3rem;
  margin: 1rem 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 2rem;
}

/* 大盒子左侧 */
.team-avatar-big {
  width: 400px;
  height: 400px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}
.team-avatar-big img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 信息内容区域 */
.team-info-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

/* 核心信息 */
.team-core-info {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}
.title-value {
  color: rgb(60, 165, 252);
  font-weight: 500
}
.info-item {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.info-label {
  font-size: 0.85rem;
  color: #64748B;
  font-weight: 500;
}
.info-value {
  font-size: 1.25rem;
  color: #2C3E50;
  font-weight: 500;
}
.info-label-desc {
  font-size: 1.05rem;
  font-weight: 600;
}

/* 团队描述 */
.team-description {
  padding-top: 0.5rem;
  border-top: 1px dashed #E2E8F0;
}
.desc-content {
  font-size: 0.95rem;
  color: #475569;
  line-height: 1.6;
  margin-top: 10px;
}

/* 邀请码区域 */
.team-invite-code {
  padding-top: 0.5rem;
  border-top: 1px dashed #E2E8F0;
}
.invite-left {
  display: flex;
  flex-direction: column;
}
.invite-label {
  font-size: 1.1rem;
  color: #000000;
  font-weight: 600;
  display: block;
}
.invite-desc {
  font-size: 0.95rem;
  color: #475569;
  line-height: 1.6;
}
/* 邀请码卡片 */
.invite-code-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #e6e4e4d5;
  border-radius: 8px;
  padding: 1rem 1.2rem;
  margin-top: 10px;
}
.invite-right {
  display: flex;
  gap: 1.3rem;
}
.code-text {
  background-color: #FFFFFF;
  color: #3498DB;
  border: none;
  border-radius: 6px;
  padding: 0.4rem 0.8rem;
  font-size: 1.05rem;
  font-weight: 480;
}
/* 复制按钮 */
.copy-btn {
  background-color: #3498DB;
  color: #FFFFFF;
  border: none;
  border-radius: 4px;
  padding: 0.4rem 0.8rem;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
.copy-btn:hover {
  background-color: #F1F5F9;
  color: #2980B9;
}

/* 项目列表区域 */
.Content {
  width: 100%;
  padding: 0 2rem 1.5rem;
  box-sizing: border-box;
  flex-grow: 1;
  flex-shrink: 0;
}
/* 无项目提示 */
.no-project {
  text-align: center;
  padding: 2rem;
  color: #94A3B8;
  font-size: 1rem;
  background-color: #FAFBFF;
  border-radius: 8px;
  margin-top: 1rem;
}

/* 项目卡片 */
.prj-Detail {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.section-header {
  margin-bottom: 0.5rem;
}
.section-header-item {
  display: flex;
  justify-content: space-between;
}
.section-header h2 {
  font-size: 1.25rem;
  color: #2C3E50;
  font-weight: 600;
}
.add-project-btn {
  background-color: #3498DB;
  color: #FFFFFF;
  font-size: 1.1rem;
  border: none;
  border-radius: 6px;
  padding: 0.4rem 0.8rem;
  font-size: 0.9rem;
  font-weight: 500;
  margin: 0 0 0.8rem 0;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-2px);
  }
}
.section-divider {
  width: 100%;
  height: 1px;
  background-color: #E2E8F0;
}
.team-project {
  background-color: #FFFFFF;
  border-radius: 8px;
  padding: 1.25rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: box-shadow 0.2s ease;
  margin: 0;
}
.team-project:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.project-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.project-title {
  font-size: 1.1rem;
  color: #2C3E50;
  font-weight: 600;
}
.project-desc {
  font-size: 0.9rem;
  color: #64748B;
  margin: 0;
  line-height: 1.5;
}
.project-meta {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-top: 0.5rem;
}
.meta-item {
  font-size: 0.85rem;
  color: #64748B;
}
.public-tag {
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  background-color: #E6F7EF;
  color: #27AE60;
  font-size: 0.8rem;
  font-weight: 500;
}
.private-tag {
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  background-color: #FFF2E6;
  color: #E67E22;
  font-size: 0.8rem;
  font-weight: 500;
}
</style>